/**
 * 登录页面组件（移动端适配详解）
 * 提供用户登录功能，并针对移动端在交互、布局、性能上做了适配。
 *
 * 移动端适配要点：
 * 1) 视口与安全区：依赖 index.html 的 viewport（viewport-fit=cover），如需可在外层容器应用 .safe-area-* 类适配刘海屏。
 * 2) 触达面积：控件最小 44x44，NavBar 通过 '--height': '44px' 保证标题栏触达区；按钮用 size="large"。
 * 3) 输入体验：使用 antd-mobile 的 Input/Form；校验规则 useMemo 缓存，减少重建与卡顿。
 * 4) 触摸反馈：Button/Toast/Dialog 统一移动端反馈风格，全局样式禁用 tap 高亮和横向滚动提升手势体验。
 * 5) 性能优化：useMemo/useCallback 缓存派生值与回调，降低受控输入与子组件无谓渲染；倒计时禁用按钮避免频繁触发。
 *
 * 功能：手机号验证码、身份证+密码、人脸登录；错误提示；登录跳转；记住我、忘记密码。
 */

// React相关导入
import React, { useState, useEffect, useMemo, useCallback } from 'react'

// Redux相关导入
import { useDispatch, useSelector } from 'react-redux'

// 路由相关导入
import { useNavigate, useLocation } from 'react-router-dom'

// Antd Mobile UI组件导入
import {
  Form,           // 表单组件
  Input,          // 输入框组件
  Button,         // 按钮组件
  Toast,          // 提示组件
  NavBar,         // 导航栏组件
  Space,          // 间距组件
  Divider,        // 分割线组件
  Checkbox,       // 复选框组件
  Dialog          // 对话框组件
} from 'antd-mobile'

// 图标组件导入
import {
  EyeInvisibleOutline,  // 隐藏密码图标
  EyeOutline,           // 显示密码图标
  UserOutline,          // 用户图标
  LockOutline,          // 锁图标
  MessageOutline        // 消息图标
} from 'antd-mobile-icons'

// Redux actions导入
import { login, sendSmsCode, clearAuthError } from '../../store/slices/authSlice'

// 人脸识别组件导入
import FaceLogin from '../../components/FaceLogin'
import FaceRegister from '../../components/FaceRegister'

// 样式文件导入
import styles from './index.module.css'

/**
 * 登录页面组件
 * @returns {JSX.Element} 登录页面
 */
const Login = () => {
  // ==================== Hooks 初始化 ====================
  
  // Redux相关hooks
  const dispatch = useDispatch()  // 用于派发Redux actions
  const navigate = useNavigate()  // 用于页面导航
  const location = useLocation()  // 获取当前路由信息
  
  // 从Redux store获取认证相关状态
  const { loading, error, isAuthenticated } = useSelector(state => state.auth)
  
  // ==================== 组件状态管理 ====================
  
  // 表单实例，用于表单操作和验证
  const [form] = Form.useForm()
  
  // 登录方式状态：'phone' 手机号登录 | 'idcard' 身份证登录 | 'face' 人脸登录
  const [loginType, setLoginType] = useState('phone')
  
  // 密码显示/隐藏状态
  const [showPassword, setShowPassword] = useState(false)
  
  // 记住我功能状态
  const [rememberMe, setRememberMe] = useState(false)
  
  // 验证码倒计时状态（秒）
  const [countdown, setCountdown] = useState(0)
  
  // 人脸识别相关状态
  const [faceLoginVisible, setFaceLoginVisible] = useState(false)
  const [faceRegisterVisible, setFaceRegisterVisible] = useState(false)
  const [currentUser, setCurrentUser] = useState(null)
  
  // ==================== 路由状态 ====================
  
  // 获取登录成功后的重定向路径，默认为首页
  const from = useMemo(() => location.state?.from?.pathname || '/home', [location.state])
  
  // 检查是否为切换账户操作
  const isSwitchAccount = useMemo(() => location.state?.switchAccount || false, [location.state])

  // ==================== 副作用处理 ====================
  
  /**
   * 监听登录状态变化
   * 当用户登录成功后，显示成功提示并跳转到目标页面
   */
  useEffect(() => {
    if (isAuthenticated) {
      Toast.show({
        content: isSwitchAccount ? '账户切换成功' : '登录成功',
        icon: 'success'
      })
      // 使用replace避免用户通过返回按钮回到登录页
      navigate(from, { replace: true })
    }
  }, [isAuthenticated, navigate, from, isSwitchAccount])

  /**
   * 监听错误信息
   * 当登录过程中出现错误时，显示错误提示
   */
  useEffect(() => {
    if (error) {
      Toast.show({
        content: error,
        icon: 'fail'
      })
      // 清除错误状态，避免重复显示
      dispatch(clearAuthError())
    }
  }, [error, dispatch])

  // ==================== 事件处理函数 ====================
  
  /**
   * 发送短信验证码
   * 验证手机号格式，发送验证码并开始倒计时
   */
  const handleSendSmsCode = useCallback(async () => {
    try {
      // 获取表单中的手机号
      const phone = form.getFieldValue('phone')
      
      // 验证手机号是否为空
      if (!phone) {
        Toast.show('请输入手机号')
        return
      }
      
      // 验证手机号格式（1开头的11位数字）
      if (!/^1[3-9]\d{9}$/.test(phone)) {
        Toast.show('请输入正确的手机号')
        return
      }

      // 调用Redux action发送验证码
      await dispatch(sendSmsCode(phone)).unwrap()
      Toast.show('验证码已发送，请查看控制台')
      
      // 开始60秒倒计时
      setCountdown(60)
      const timer = setInterval(() => {
        setCountdown(prev => {
          if (prev <= 1) {
            clearInterval(timer)  // 倒计时结束，清除定时器
            return 0
          }
          return prev - 1
        })
      }, 1000)
    } catch (error) {
      // 发送失败，显示错误信息
      Toast.show(error.message || '发送验证码失败')
    }
  }, [dispatch, form])

  /**
   * 处理登录提交
   * 根据登录方式调用不同的登录逻辑
   * @param {Object} values - 表单数据
   */
  const handleLogin = useCallback(async (values) => {
    try {
      if (loginType === 'phone') {
        // 手机号验证码登录
        await dispatch(login({
          type: 'phone',
          phone: values.phone,
          smsCode: values.smsCode
        })).unwrap()
      } else {
        // 身份证号密码登录
        await dispatch(login({
          type: 'idcard',
          idCard: values.idCard,
          password: values.password
        })).unwrap()
      }
    } catch (error) {
      // 错误信息已在useEffect中统一处理
      console.error('登录失败:', error)
    }
  }, [dispatch, loginType])

  /**
   * 切换登录方式
   * 在手机号登录、身份证登录和人脸登录之间切换
   */
  const handleSwitchLoginType = useCallback(() => {
    const types = ['phone', 'idcard', 'face']
    const currentIndex = types.indexOf(loginType)
    const nextIndex = (currentIndex + 1) % types.length
    setLoginType(types[nextIndex])
    form.resetFields()  // 清空表单数据
  }, [form, loginType])

  /**
   * 忘记密码处理
   * 显示忘记密码的提示信息
   */
  const handleForgotPassword = useCallback(() => {
    Dialog.alert({
      title: '忘记密码',
      content: '请联系客服重置密码\n客服电话：400-123-4567',
      confirmText: '知道了'
    })
  }, [])

  /**
   * 人脸登录成功处理
   * @param {Object} user - 识别到的用户信息
   */
  const handleFaceLoginSuccess = useCallback(async (user) => {
    try {
      // 使用识别到的用户信息进行登录
      await dispatch(login({
        type: 'face',
        userId: user.user_id,
        userInfo: user.user_info
      })).unwrap()
      
      setCurrentUser(user)
    } catch (error) {
      console.error('人脸登录失败:', error)
    }
  }, [dispatch])

  /**
   * 人脸注册成功处理
   * @param {Object} result - 注册结果
   */
  const handleFaceRegisterSuccess = useCallback(() => {
    Toast.show('人脸注册成功，请使用人脸登录')
    setFaceRegisterVisible(false)
  }, [])

  /**
   * 打开人脸登录
   */
  const handleOpenFaceLogin = useCallback(() => {
    setFaceLoginVisible(true)
  }, [])

  /**
   * 打开人脸注册
   */
  const handleOpenFaceRegister = useCallback(() => {
    setFaceRegisterVisible(true)
  }, [])

  // ==================== Memo: 规则与派生文本 ====================
  const phoneRules = useMemo(() => ([
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
  ]), [])

  const smsRules = useMemo(() => ([
    { required: true, message: '请输入验证码' },
    { len: 6, message: '验证码为6位数字' }
  ]), [])

  const idCardRules = useMemo(() => ([
    { required: true, message: '请输入身份证号' },
    { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号' }
  ]), [])

  const passwordRules = useMemo(() => ([
    { required: true, message: '请输入密码' },
    { min: 6, message: '密码至少6位' }
  ]), [])

  const smsButtonText = useMemo(() => countdown > 0 ? `${countdown}s` : '获取验证码', [countdown])

  const handleBack = useCallback(() => navigate(-1), [navigate])

  // ==================== 渲染组件 ====================
  
  return (
    <div className={styles.container}>
      {/* 顶部导航栏 */}
      <NavBar
        onBack={handleBack}  // 返回上一页
        style={{ '--height': '44px' }}
      >
        {isSwitchAccount ? '切换账户' : '登录'}
      </NavBar>

      {/* 登录表单容器 */}
      <div className={styles.formContainer}>
        {/* 应用Logo和标题区域 */}
        <div className={styles.header}>
          <div className={styles.logo}>
            <UserOutline fontSize={48} color="var(--adm-color-primary)" />
          </div>
          <h1 className={styles.title}>医疗挂号系统</h1>
          <p className={styles.subtitle}>
            {isSwitchAccount ? '请选择新账户的登录方式' : '请选择登录方式'}
          </p>
        </div>

        {/* 登录方式切换标签 */}
        <div className={styles.loginTypeTabs}>
          <button
            className={`${styles.tab} ${loginType === 'phone' ? styles.active : ''}`}
            onClick={() => setLoginType('phone')}
          >
            手机号登录
          </button>
          <button
            className={`${styles.tab} ${loginType === 'idcard' ? styles.active : ''}`}
            onClick={() => setLoginType('idcard')}
          >
            身份证登录
          </button>
          <button
            className={`${styles.tab} ${loginType === 'face' ? styles.active : ''}`}
            onClick={() => setLoginType('face')}
          >
            人脸登录
          </button>
        </div>

        {/* 登录表单 */}
        <Form
          form={form}
          onFinish={handleLogin}
          className={styles.form}
          layout="vertical"
        >
          {loginType === 'face' ? (
            // ==================== 人脸登录表单 ====================
            <div className={styles.faceLoginContainer}>
              <div className={styles.faceLoginContent}>
                <div className={styles.faceLoginIcon}>📱</div>
                <h3>人脸识别登录</h3>
                <p>使用人脸识别技术，安全便捷登录</p>
                <div className={styles.faceLoginButtons}>
                  <Button
                    color="primary"
                    size="large"
                    onClick={handleOpenFaceLogin}
                    className={styles.faceLoginButton}
                  >
                    开始人脸识别
                  </Button>
                  <Button
                    size="large"
                    onClick={handleOpenFaceRegister}
                    className={styles.faceRegisterButton}
                  >
                    注册人脸信息
                  </Button>
                </div>
                <div className={styles.faceLoginTips}>
                  <h4>使用说明：</h4>
                  <ul>
                    <li>首次使用需要先注册人脸信息</li>
                    <li>确保光线充足，人脸清晰</li>
                    <li>支持拍照和相册选择</li>
                    <li>人脸信息加密存储，安全可靠</li>
                  </ul>
                </div>
              </div>
            </div>
          ) : loginType === 'phone' ? (
            // ==================== 手机号登录表单 ====================
            <>
              {/* 手机号输入框 */}
              <Form.Item
                name="phone"
                label="手机号"
                rules={phoneRules}
              >
                <Input
                  placeholder="请输入手机号"
                  prefix={<MessageOutline />}
                  maxLength={11}
                />
              </Form.Item>

              {/* 验证码输入框 */}
              <Form.Item
                name="smsCode"
                label="验证码"
                rules={smsRules}
              >
                <div className={styles.smsCodeInput}>
                  <Input
                    placeholder="请输入验证码"
                    prefix={<LockOutline />}
                    maxLength={6}
                  />
                  <Button
                    size="small"
                    disabled={countdown > 0}  // 倒计时期间禁用按钮
                    onClick={handleSendSmsCode}
                    className={styles.smsButton}
                  >
                    {smsButtonText}
                  </Button>
                </div>
              </Form.Item>
            </>
          ) : (
            // ==================== 身份证登录表单 ====================
            <>
              {/* 身份证号输入框 */}
              <Form.Item
                name="idCard"
                label="身份证号"
                rules={idCardRules}
              >
                <Input
                  placeholder="请输入身份证号"
                  prefix={<UserOutline />}
                  maxLength={18}
                />
              </Form.Item>

              {/* 密码输入框 */}
              <Form.Item
                name="password"
                label="密码"
                rules={passwordRules}
              >
                <Input
                  placeholder="请输入密码（开发环境：123456）"
                  prefix={<LockOutline />}
                  type={showPassword ? 'text' : 'password'}
                  suffix={
                    <div onClick={() => setShowPassword(!showPassword)}>
                      {showPassword ? <EyeOutline /> : <EyeInvisibleOutline />}
                    </div>
                  }
                />
              </Form.Item>
            </>
          )}

          {/* ==================== 表单选项 ==================== */}
          {/* 记住我和忘记密码选项 */}
          <div className={styles.formOptions}>
            <Checkbox
              checked={rememberMe}
              onChange={setRememberMe}
            >
              记住我
            </Checkbox>
            {loginType === 'idcard' && (
              <button
                type="button"
                className={styles.forgotPassword}
                onClick={handleForgotPassword}
              >
                忘记密码？
              </button>
            )}
          </div>

          {/* 登录提交按钮 */}
          <Form.Item>
            <Button
              type="submit"
              color="primary"
              size="large"
              block
              loading={loading}  // 登录过程中显示加载状态
              className={styles.loginButton}
            >
              登录
            </Button>
          </Form.Item>
        </Form>

        {/* ==================== 其他功能区域 ==================== */}
        
        {/* 其他登录方式切换 */}
        <div className={styles.otherLogin}>
          <Divider>其他登录方式</Divider>
          <Space>
            <Button
              size="small"
              onClick={handleSwitchLoginType}
            >
              {loginType === 'phone' ? '身份证登录' : 
               loginType === 'idcard' ? '人脸登录' : '手机号登录'}
            </Button>
          </Space>
        </div>

        {/* 用户协议和隐私政策 */}
        <div className={styles.agreement}>
          <p>
            登录即表示同意
            <button className={styles.link}>《用户协议》</button>
            和
            <button className={styles.link}>《隐私政策》</button>
          </p>
        </div>
      </div>

      {/* 人脸识别组件 */}
      <FaceLogin
        visible={faceLoginVisible}
        onClose={() => setFaceLoginVisible(false)}
        onSuccess={handleFaceLoginSuccess}
        onRegister={handleOpenFaceRegister}
      />

      <FaceRegister
        visible={faceRegisterVisible}
        onClose={() => setFaceRegisterVisible(false)}
        onSuccess={handleFaceRegisterSuccess}
        userId={currentUser?.user_id || 'user_' + Date.now()}
        userInfo={currentUser?.user_info || ''}
      />
    </div>
  )
}

export default Login
